import { onMounted, onUnmounted, ref } from "vue"
// 引入节流
import _, { throttle } from "underscore"
// console.log(throttle);

export default function useScroll() {
  const isReachBottom = ref(false)
  const clientHeight = ref(0);
  const scrollTop = ref(0);
  const scrollHeight = ref(0);

  const scrollListenerHandler = throttle(() => {
    clientHeight.value = document.documentElement.clientHeight;
    scrollTop.value = document.documentElement.scrollTop;
    scrollHeight.value = document.documentElement.scrollHeight;
    // console.log(clientHeight, scrollTop, scrollHeight);
    console.log("我使用了节流");

    if (clientHeight.value + Math.ceil(scrollTop.value) >= scrollHeight.value) {
      console.log("滚动到底部了");
      // homeStore.FetchHoustLists();
      // 1.传递回调函数
      // if (reachBottomCB) reachBottomCB()

      // 2.
      isReachBottom.value = true
    }
  }, 1000)

  onMounted(() => {
    window.addEventListener("scroll", scrollListenerHandler);
  });

  onUnmounted(() => {
    window.removeEventListener("scroll", scrollListenerHandler);
  });

  return { isReachBottom, scrollTop, scrollHeight, clientHeight }
}